{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}">
  {% if cl.formset %}
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">
  {% endif %}
  {% if cl.formset or action_form %}
    <script src="{% static 'admin/js/jquery.init.js' %}"></script>
    <script src="{% static 'admin/js/core.js' %}"></script>
  {% endif %}
  {{ media.css }}
  <style>
    /* 美化列表页面 */
    #changelist {
        background: white;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    #changelist-filter {
        background: #f8f9fa;
        border-left: 1px solid #e0e0e0;
    }
    
    #changelist-filter h2 {
        background: #2c3e50;
        color: white;
        padding: 12px 15px;
        margin: 0;
    }
    
    #changelist-filter h3 {
        font-size: 14px;
        padding: 10px 15px;
        margin: 0;
        border-bottom: 1px solid #e0e0e0;
        color: #555;
    }
    
    #changelist-filter ul {
        padding: 0;
        margin: 0;
    }
    
    #changelist-filter li {
        padding: 8px 15px;
        border-bottom: 1px solid #eee;
    }
    
    #changelist-filter li.selected {
        background: #ebf5fb;
        border-left: 3px solid #3498db;
    }
    
    #changelist-filter li a {
        color: #333;
        text-decoration: none;
    }
    
    #changelist-filter li a:hover {
        color: #3498db;
    }
    
    /* 美化表格 */
    #result_list {
        width: 100%;
        border-collapse: collapse;
    }
    
    #result_list thead th {
        background: #34495e;
        color: white;
        padding: 12px;
        font-weight: bold;
        text-align: left;
    }
    
    #result_list thead th a {
        color: white;
    }
    
    #result_list tbody tr {
        border-bottom: 1px solid #eee;
    }
    
    #result_list tbody tr:hover {
        background: #f5f7fa;
    }
    
    #result_list tbody td {
        padding: 12px;
    }
    
    /* 美化分页 */
    .paginator {
        padding: 15px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
        text-align: center;
    }
    
    .paginator a, .paginator .this-page {
        display: inline-block;
        padding: 5px 10px;
        margin: 0 2px;
        border-radius: 3px;
    }
    
    .paginator a {
        background: white;
        color: #3498db;
        border: 1px solid #ddd;
        text-decoration: none;
    }
    
    .paginator a:hover {
        background: #f0f7ff;
        border-color: #3498db;
    }
    
    .paginator .this-page {
        background: #3498db;
        color: white;
        font-weight: bold;
    }
    
    /* 美化搜索框 */
    #changelist-search {
        padding: 15px;
        background: #f8f9fa;
        border-bottom: 1px solid #e0e0e0;
    }
    
    #changelist-search input[type="text"] {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 3px;
        width: 250px;
    }
    
    #changelist-search input[type="submit"] {
        background: #3498db;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 3px;
        font-weight: bold;
        cursor: pointer;
    }
    
    #changelist-search input[type="submit"]:hover {
        background: #2980b9;
    }
    
    /* 美化操作按钮 */
    .object-tools {
        margin-bottom: 15px;
    }
    
    .object-tools li {
        margin-left: 5px;
    }
    
    .object-tools a {
        background: #3498db;
        color: white;
        padding: 8px 15px;
        border-radius: 3px;
        font-weight: bold;
    }
    
    .object-tools a:hover {
        background: #2980b9;
    }
    
    .actions {
        padding: 15px;
        background: #f8f9fa;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .actions select {
        padding: 5px;
        border-radius: 3px;
        border: 1px solid #ddd;
    }
    
    .actions button {
        background: #3498db;
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 3px;
        font-weight: bold;
        cursor: pointer;
    }
    
    .actions button:hover {
        background: #2980b9;
    }
    
    /* 高级搜索折叠样式 */
    .advanced-search {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
    }
    
    .advanced-search .search-field {
        margin-bottom: 10px;
    }
    
    .advanced-search label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: #555;
    }
    
    .advanced-search-toggle {
        cursor: pointer;
        color: #3498db;
        font-weight: bold;
        margin-bottom: 10px;
        display: inline-block;
    }
  </style>
{% endblock %}

{% block extrahead %}
{{ block.super }}
{{ media.js }}
<script src="{% static 'admin/js/filters.js' %}" defer></script>
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
&rsaquo; <a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
&rsaquo; {{ cl.opts.verbose_name_plural|capfirst }}
</div>
{% endblock %}
{% endif %}

{% block coltype %}{% endblock %}

{% block content %}
  <div id="content-main">
    {% block object-tools %}
        <ul class="object-tools">
          {% block object-tools-items %}
            {% change_list_object_tools %}
          {% endblock %}
        </ul>
    {% endblock %}
    {% if cl.formset and cl.formset.errors %}
        <p class="errornote">
        {% blocktranslate count counter=cl.formset.errors|length %}请更正下面的错误。{% plural %}请更正下面的错误。{% endblocktranslate %}
        </p>
        {{ cl.formset.non_form_errors }}
    {% endif %}
    <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
      <div class="changelist-form-container">
        {% block search %}{% search_form cl %}{% endblock %}
        {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}

        <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
        {% if cl.formset %}
          <div>{{ cl.formset.management_form }}</div>
        {% endif %}

        {% block result_list %}
          {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
          {% result_list cl %}
          {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
        {% endblock %}
        {% block pagination %}{% pagination cl %}{% endblock %}
        </form>
      </div>
      {% block filters %}
        {% if cl.has_filters %}
          <div id="changelist-filter">
            <h2>{% translate "筛选" %}</h2>
            {% if cl.has_active_filters %}<h3 id="changelist-filter-clear">
              <a href="{{ cl.clear_all_filters_qs }}">&#10006; {% translate "清除所有筛选器" %}</a>
            </h3>{% endif %}
            {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
          </div>
        {% endif %}
      {% endblock %}
    </div>
  </div>
{% endblock %} 